| 发一组做网页焦点图的代码 |
| 作者/Circle 时间/2006-11-16 10:46:00 类别/设计编程 查看/ |
 发表评论 以论坛方式查看 |
| 标签：it 网页 设计 |
|
<style> body {padding:0px;margin:0px;background:#fff;font-size:12px;color:#6E7D91;font-family:"Arial", "Helvetica", "sans- serif";text-align:center;} .center {margin-left:auto;margin-right:auto;} img {border:0;} .K {width:100%;clear:both;height:1px;line-height:1px;} a {color:#282828;text-decoration:underline;} .sb1 {width:302px;height:16px;text-align:left;background:#F1F1F1 repeat;border:#CBCBCB 1px solid;border-bottom:0;padding:5px 0 0 10px;color:#6F6F6F;font-weight:bold;} .sb2 {width:298px;height:152px;text-align:left;background:#F9F9F9 repeat;border-left:#CBCBCB 1px solid;border-right:#CBCBCB 1px solid;padding:5px 0 0 7px;} .sb3 {width:312px;height:22px;text-align:left;background:#F9F9F9 repeat;border:#CBCBCB 1px solid;border-top:0;font- size:12px;} .bg1 {width:141px;height:22px;background-image:url(http://www.soso.com/images/sobar_bg001.gif);float:right;} .bg2 {width:141px;height:22px;background-image:url(http://www.soso.com/images/sobar_bg002.gif);float:right;} .bg3 {width:141px;height:22px;background-image:url(http://www.soso.com/images/sobar_bg003.gif);float:right;} .bg4 {width:141px;height:22px;background-image:url(http://www.soso.com/images/sobar_bg004.gif);float:right;} .bg5 {width:141px;height:22px;background-image:url(http://www.soso.com/images/sobar_bg005.gif);float:right;} .text {width:150px;height:20px;float:left;padding:5px 0 0 7px;} li{float:left;width:14px;display:block;color:#fff;list-style-type:none;padding:7px 0 0 12px;text-align:center;font- size:10px;} li a{color:#fff;padding:0 3px;font-size:10px;text-decoration:none;} </style> </head> <body onload="javascript:doTimer();"> <script language="JavaScript" type="text/JavaScript"> var theLayer = 1; var the_timeout; function doTimer() { setFocus1( theLayer ); theLayer ++; if (theLayer > 5) theLayer = 1; the_timeout = setTimeout("doTimer();", 4000); } function setFocus1(i) { selectLayer1(i); } function selectLayer1(i) { switch(i) { case 1: document.getElementById("P1").style.display="block"; document.getElementById("P2").style.display="none"; document.getElementById("P3").style.display="none"; document.getElementById("P4").style.display="none"; document.getElementById("P5").style.display="none"; theLayer=1; break; case 2: document.getElementById("P1").style.display="none"; document.getElementById("P2").style.display="block"; document.getElementById("P3").style.display="none"; document.getElementById("P4").style.display="none"; document.getElementById("P5").style.display="none"; theLayer=2; break; case 3: document.getElementById("P1").style.display="none"; document.getElementById("P2").style.display="none"; document.getElementById("P3").style.display="block"; document.getElementById("P4").style.display="none"; document.getElementById("P5").style.display="none"; theLayer=3; break; case 4: document.getElementById("P1").style.display="none"; document.getElementById("P2").style.display="none"; document.getElementById("P3").style.display="none"; document.getElementById("P4").style.display="block"; document.getElementById("P5").style.display="none"; theLayer=4; break; case 5: document.getElementById("P1").style.display="none"; document.getElementById("P2").style.display="none"; document.getElementById("P3").style.display="none"; document.getElementById("P4").style.display="none"; document.getElementById("P5").style.display="block"; theLayer=5; } } </script> <div class="sb1">热搜图片</div> <div id="P1" style="display:block;"> <div class="sb2"><a href="/q?sc=img&ch=p.hs&w=裸而不露" target="_blank"><img src="http://wcache.soso.com/www/images/photo/mtop02a.jpg" /></a></div> <div class="sb3"> <div class="text"><a href="/q?sc=img&ch=p.hs&w=裸而不露" target="_blank">超热火的尤物</a></div> <div class="bg1"> <li>1</li><li><a href="javascript:setFocus1(2);">2</a></li><li><a href="javascript:setFocus1(3);">3</a></li><li><a href="javascript:setFocus1(4);">4</a></li><li><a href="javascript:setFocus1(5);">5</a></li> </div> </div> </div> <div id="P2" style="display:none;"> <div class="sb2"><a href="/q?sc=img&ch=p.hs&w=错版 人民币" target="_blank"><img src="http://wcache.soso.com/www/images/photo/mtop04a.jpg" /></a></div> <div class="sb3"> <div class="text"><a href="/q?sc=img&ch=p.hs&w=错版 人民币" target="_blank">亦真亦假的错版人民币</a></div> <div class="bg2"> <li><a href="javascript:setFocus1(1);">1</a></li><li>2</li><li><a href="javascript:setFocus1(3);">3</a></li><li><a href="javascript:setFocus1(4);">4</a></li><li><a href="javascript:setFocus1(5);">5</a></li> </div> </div> </div> <div id="P3" style="display:none;"> <div class="sb2"><a href="/q?sc=img&ch=p.hs&w=女星 瘦" target="_blank"><img src="http://wcache.soso.com/www/images/photo/mtop03a.jpg" /></a></div> <div class="sb3"> <div class="text"><a href="/q?sc=img&ch=p.hs&w=女星 瘦" target="_blank">当性感女星大变排骨精</a></div> <div class="bg3"> <li><a href="javascript:setFocus1(1);">1</a></li><li><a href="javascript:setFocus1(2);">2</a></li><li>3</li><li><a href="javascript:setFocus1(4);">4</a></li><li><a href="javascript:setFocus1(5);">5</a></li> </div> </div> </div> <div id="P4" style="display:none;"> <div class="sb2"><a href="/q?sc=img&ch=p.hs&w=汽车 沙发" target="_blank"><img src="http://wcache.soso.com/www/images/photo/mtop05a.jpg" /></a></div> <div class="sb3"> <div class="text"><a href="/q?sc=img&ch=p.hs&w=汽车 沙发" target="_blank">体验沙发般的乘车感受</a></div> <div class="bg4"> <li><a href="javascript:setFocus1(1);">1</a></li><li><a href="javascript:setFocus1(2);">2</a></li><li><a href="javascript:setFocus1(3);">3</a></li><li>4</li><li><a href="javascript:setFocus1(5);">5</a></li> </div> </div> </div> <div id="P5" style="display:none;"> <div class="sb2"><a href="/q?sc=img&ch=p.hs&w=恐怖 地方" target="_blank"><img src="http://wcache.soso.com/www/images/photo/mtop01a.jpg" /></a></div> <div class="sb3"> <div class="text"><a href="/q?sc=img&ch=p.hs&w=恐怖 地方" target="_blank">世界恐怖地之一无脑城</a></div> <div class="bg5"> <li><a href="javascript:setFocus1(1);">1</a></li><li><a href="javascript:setFocus1(2);">2</a></li><li><a href="javascript:setFocus1(3);">3</a></li><li><a href="javascript:setFocus1(4);">4</a></li><li>5</li> </div> </div> </div> |
| 查看该用户更多文章>> |